<!-- 理财 -->
 <template>
    <div class="financial">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in dataList" :key="item.id">
                    <img class="slide-img" :src="item.imgUrl">
                    <div class="slide-box">
                        <div :class="['box-type', index % 2 === 0 ? 'pink' : 'green']" >{{ item.type }}</div>
                        <p class="font-36 font-600">{{ item.title }}</p>
                        <div class="box-income">
                            <div class="flex justify-between mb-6">
                                <p><span class="font-40 font-600 mr-6">{{ item.num }}</span><span class="font-30 font-600" style="color: #B5B5B5;">购买人数</span></p>
                                <p><span class="font-40 font-600 mr-6" style="color: #4D9462;">{{ item.rate }}%</span><span class="font-30 font-600" style="color: #B5B5B5;">日收益</span></p>
                            </div>
                            <div class="income-schedule"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="financial-content">
            <p class="mb-36 font-44 font-600">理财</p>
            <p class="mb-30 font-38" style="color: #6F6F6F;">冷静应付未来，理财让你无忧。</p>
            <div class="content-box">
                <p class="font-44 font-700">历史最高年化收益</p>
                <div class="flex justify-between">
                    <div>
                        <p class="font-40 font-700 mb-14" style="color: #4BA54B;">13.5%</p>
                        <p class="font-34 font-700" style="color: #B8B8B8;">活期</p>
                    </div>
                    <div>
                        <p class="font-40 font-700 mb-14" style="color: #4BA54B;">18.6%</p>
                        <p class="font-34 font-700 text-right" style="color: #B8B8B8;">定期</p>
                    </div>
                </div>
            </div>
            <homeButton :name="'立即购买'"/>
        </div>
    </div>
 </template>

 <script>
 import Swiper from 'swiper'; 
 import 'swiper/css/swiper.min.css';
 import homeButton from './homeButton.vue';
 export default {
    components:{
        homeButton,
    },
    data() {
        return {
            mySwiper:null,
            dataList:[
                {
                    id:0,
                    imgUrl:new URL('@/assets/image/home/licai1.png',import.meta.url).href,
                    type:'定期',
                    title:'AI-GPT',
                    num:2000,
                    rate:0.3,
                },
                {
                    id:1,
                    imgUrl:new URL('@/assets/image/home/licai2.png',import.meta.url).href,
                    type:'活期',
                    title:'AI-GPT2',
                    num:7868,
                    rate:1.98,
                },
                {
                    id:2,
                    imgUrl:new URL('@/assets/image/home/licai3.png',import.meta.url).href,
                    type:'定期',
                    title:'AI-GPT3',
                    num:4887,
                    rate:0.35,
                },
            ]
        }
    },
    mounted() {
        this.mySwiper = new Swiper('.swiper-container', {
	        slidesPerView: "auto",
            spaceBetween: 20,
            
        })
    },
 }
 </script>

 <style lang="scss" scoped>
.swiper-container {
    width: 100%;
    min-height: 750px;
    padding-bottom: 2px;
    margin-bottom: 72px;
}
.swiper-slide {
    width: 84%;
    border-radius: 12px;
    border:1px solid #364140;
    display: flex;
    flex-direction: column;
    background-color: #1F1F1F;
    .slide-img{
        width: 100%;
        height: 432px;
    }
    .slide-box{
        padding: 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 16px;
        .box-type{
            min-width: 142px;
            width: fit-content;
            height: 74px;
            color: #000;
            border-radius: 52px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            box-sizing: border-box;
            font-size: 30px;
            font-weight: 700;
        }
        .box-income{
            height: 124px;
            padding: 20px;
            background-color: #141414;
            border-radius: 20px;
            box-sizing: border-box;
            .income-schedule{
                border-radius: 20px;
                height: 20px;
                width: 100%;
                background: linear-gradient(90deg, #719efb, #bcff2f);
            }
        }
    }
}

.financial-content{
    .content-box{
        width: 100%;
        height: 284px;
        background-color: #1F1F1F;
        border-radius: 20px;
        padding: 42px 22px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 40px;
    }
}

.pink{
    background-color: #FF8DFF;
}
.green{
    background-color: #BBEF4D;
}
 </style>